<template>
  <div v-if="show"
       class="confirm-box">
    <!-- 蒙层 -->
    <div class="mask"
         @click="maskClick"/>

    <!-- 确认框 -->
    <div :style="{width, height}"
         class="confirm">
      <div class="header">
        <div>{{ title }}</div>
        <i class="iconfont icon-close-new"
           @click="close"/>
      </div>
      <div class="body">
        <i :class="`iconfont icon-${icon}`"
           :style="{color: iconColor}"/>
        {{ message }}
      </div>
      <div class="footer">
        <div v-if="cancelBtn"
             class="cancel"
             @click="cancelClick">
          取消
        </div>
        <div class="accept"
             @click="acceptClick">
          确定
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts"
        setup>
import {computed} from 'vue'

let emit = defineEmits<{
  (e: 'update:modelValue', v: boolean): void
  (e: 'close'): void
  (e: 'accept'): void
}>()

let props = withDefaults(defineProps<{
  modelValue?: boolean
  maskClose?: boolean
  width?: string
  height?: string
  title?: string
  icon?: string
  iconColor?: string
  message?: string
  cancelBtn?: boolean
  closeCallback?: Function
  acceptCallback?: Function
}>(), {
  modelValue: true,
  maskClose: true,
  width: '400px',
  height: 'auto',
  title: '温馨提示',
  icon: 'warning',
  iconColor: '#cf4444',
  message: '',
  cancelBtn: true,
  closeCallback: () => {
  },
  acceptCallback: () => {
  }
})

let show = computed<boolean>({
  get(): boolean {
    return props.modelValue
  },
  set(v: boolean): void {
    emit('update:modelValue', v)
  }
})

function close() {
  show.value = false
  emit('close')
  props.closeCallback()
}

function cancelClick() {
  close()
}

function acceptClick() {
  emit('accept')
  props.acceptCallback()
  close()
}

function maskClick() {
  if (!props.maskClose) return
  close()
}
</script>

<style lang="less"
       scoped>
.confirm-box {
  z-index: 8000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;

  .mask {
    position: absolute;
    z-index: 8000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(black, .2);
  }

  .confirm {
    position: absolute;
    border-radius: 4px;
    z-index: 8001;
    background-color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .header {
      padding: 0 20px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      div {
        font-size: 18px;
      }

      i {
        cursor: pointer;

        &:hover {
          color: #CF4444;
        }
      }
    }

    .body {
      padding: 20px 40px;
      font-size: 16px;
    }

    .footer {
      display: flex;
      justify-content: flex-end;
      padding: 0 20px 20px;
      .btn() {
        width: 60px;
        height: 32px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        cursor: pointer;
      }

      .cancel {
        .btn();
        background-color: #cccccc;
      }

      .accept {
        .btn();
        margin-left: 15px;
        background-color: @xtxColor;
      }
    }
  }
}
</style>